<!-- 轻量级赞助播报组件 -->
<template>
  <!-- 测试按钮 -->
  <button class="test-btn" @tap="testBanner" style="position: fixed; top: 60px; right: 20px; z-index: 100000; background: #ff6b6b; color: white; padding: 5px 10px; border-radius: 5px; font-size: 12px;">
    测试横幅
  </button>
  
  <!-- 赞助横幅 -->
  <view v-if="show" class="light-banner" :class="bannerClass">
    <view class="banner-content">
      <text class="banner-text">{{ message }}</text>
      <button class="close-btn" @tap="close">×</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const show = ref(false)
const message = ref('')
const bannerClass = ref('')
let autoCloseTimer = null

onMounted(() => {
  console.log('🎉 LightBanner 组件已挂载')
  console.log('🎉 当前页面路径:', window.location?.href || 'unknown')
  console.log('🎉 组件挂载状态:', show.value)
  
  // 监听赞助成功事件
  uni.$on('sponsor-success', handleSponsorSuccess)
  console.log('🎉 LightBanner 已注册uni.$on监听器')
  
  // 暴露方法到全局
  if (typeof getApp === 'function') {
    try {
      const app = getApp()
      console.log('🎉 获取到app实例:', app)
      if (app) {
        app.__LIGHT_BANNER__ = {
          show: (msg, level = 0) => {
            console.log('🎉 LightBanner.show 被调用:', msg, 'level:', level)
            message.value = msg
            show.value = true
            bannerClass.value = `level-${level}`
            
            // 自动关闭
            if (autoCloseTimer) clearTimeout(autoCloseTimer)
            autoCloseTimer = setTimeout(() => {
              show.value = false
              console.log('🎉 LightBanner 自动关闭')
            }, 3000)
            
            console.log('🎉 LightBanner 显示完成，show状态:', show.value)
          },
          hide: () => {
            console.log('🎉 LightBanner.hide 被调用')
            show.value = false
          }
        }
        console.log('🎉 LightBanner 已暴露到app实例')
        console.log('🎉 app.__LIGHT_BANNER__ 存在:', !!app.__LIGHT_BANNER__)
      } else {
        console.log('🎉 app实例为空')
      }
    } catch (error) {
      console.log('🎉 无法获取app实例:', error)
    }
  } else {
    console.log('🎉 getApp函数不存在')
  }
})

onUnmounted(() => {
  uni.$off('sponsor-success', handleSponsorSuccess)
  if (autoCloseTimer) {
    clearTimeout(autoCloseTimer)
  }
})

function handleSponsorSuccess(data) {
  console.log('🎉 LightBanner 收到赞助消息:', data)
  
  const sponsorText = `${data.sponsorName} 赞助了 ¥${data.amount} (${data.sponsorType})`
  const levelText = data.level ? ` - 等级${data.level}` : ''
  
  message.value = sponsorText + levelText
  show.value = true
  bannerClass.value = `level-${data.level || 0}`
  
  // 自动关闭
  if (autoCloseTimer) clearTimeout(autoCloseTimer)
  autoCloseTimer = setTimeout(() => {
    show.value = false
  }, 3000)
}

function close() {
  show.value = false
  if (autoCloseTimer) {
    clearTimeout(autoCloseTimer)
  }
}

function testBanner() {
  console.log('🎉 LightBanner 测试按钮被点击')
  console.log('🎉 当前show状态:', show.value)
  
  // 直接测试显示
  message.value = '测试用户 赞助了 ¥100 (个人) - 等级1'
  show.value = true
  bannerClass.value = 'level-1'
  
  console.log('🎉 测试横幅显示，show状态:', show.value)
  
  // 自动关闭
  if (autoCloseTimer) clearTimeout(autoCloseTimer)
  autoCloseTimer = setTimeout(() => {
    show.value = false
    console.log('🎉 测试横幅自动关闭')
  }, 3000)
}
</script>

<style scoped>
.light-banner {
  position: fixed;
  top: 20px;
  right: 20px;
  max-width: 300px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  z-index: 99999; /* 提高层级，确保在最上层 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-out;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.banner-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 不同等级样式 */
.level-0 { background: rgba(0, 0, 0, 0.8); }
.level-1 { background: rgba(76, 175, 80, 0.9); }
.level-2 { background: rgba(33, 150, 243, 0.9); }
.level-3 { background: rgba(156, 39, 176, 0.9); }
.level-4 { background: rgba(255, 152, 0, 0.9); }
.level-5 { background: rgba(244, 67, 54, 0.9); }

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>
